<template>
	<div class="container">{{count}}</div>
	<input type="text" v-model="count">
	<!-- <button @click="increment">Count is: {{ count }}</button> -->
	
</template>

<script setup>
	import { ref, onMounted,onBeforeMount,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
	
	// 响应式状态
	const count = ref(0)
	
	// // 用来修改状态、触发更新的函数
	// function increment() {
	//   count.value++
	// }
	
	// 生命周期钩子
	onBeforeMount(() => {
	  console.log("组件挂载前",document.querySelector('.container'))
	})
	onMounted(() => {
	  console.log("组件挂载后",document.querySelector('.container'))
	})
	onBeforeUpdate(() => {
	  console.log("组件更新前",document.querySelector('.container'))
	})
	onUpdated(() => {
	  console.log("组件更新后",document.querySelector('.container'))
	})
</script>

<style>
</style>